<template>
  <div class="dog1">
    <img :src="ImgUrl" alt="" />
    <p :style="{ backgroundColor: colorStr }" @click="color">{{ Name }}</p>
  </div>
</template>

<script>
export default {
  props: ["ImgUrl", "Name"],

  data() {
    return {
      colorStr: "",
    };
  },
  methods: {
    color() {
      // Math.random()输出0到1(包括0，不包含1)的随机数。
      // toString(16)将随机数转换为16进制的字符串。
      // substring(2, 8)截取字符串，因为随机数大于等于0小于1，前两位是“0.”，substring(2)从第三位开始截取。
      this.colorStr = "#" + Math.random().toString(16).slice(2, 8);
      this.$emit("clickFn", this.Name);
    },
  },
};
</script>

<style scoped>
.dog1 {
  width: 400px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.dog1 img {
  width: 100%;
  height: 300px;
}
</style>